<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞牛影视 - 首页</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/utilities.css">
  <link rel="stylesheet" href="css/remixicon.min.css">
  <style>
    #mediaList {
      padding-bottom: 6rem;
    }
    #mediaList .media-grid{
      overflow: hidden;
    }
    .page-content{
      overflow-y: auto;
      height: calc(100vh + var(--header-height));
    }
  </style>
</head>
<body class="theme-dark">
  <div class="app-container">
    <!-- 侧边栏 -->
    <aside class="sidebar" id="sidebar">
    </aside>

    <!-- 移动端侧边栏遮罩 -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 顶部导航栏 -->
      <header class="header" id="header">       
      </header>

      <!-- 页面内容 -->
      <div class="page-content">
        <section class="section">
          <div class="media-categories">
            <div class="category-grid" id="categoryGrid">
            
            </div>
          </div>

          <div class="media-section" id="continueWatching">
            <div class="section-header">
              <h2 class="section-title">继续观看</h2>
              <a href="history.html" class="view-more">
                更多 <i class="ri-arrow-right-s-line"></i>
              </a>
            </div>
            <div class="media-grid" id="continueWatchingGrid">
              <!-- 加载中状态 -->
                <div class="media-skeleton"></div>
                <div class="media-skeleton"></div>
                <div class="media-skeleton"></div>
                <div class="media-skeleton"></div>
                <div class="media-skeleton"></div>
                <div class="media-skeleton"></div>
                <div class="media-skeleton"></div>
                <div class="media-skeleton"></div>
            </div>
          </div>
          <div id="mediaList"></div>
          
        </section>
      </div>
    </main>

    <!-- 主题选择对话框 -->
    <div class="modal" id="themeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>选择主题</h2>
          <button class="btn-icon modal-close" id="closeThemeModal">
            <i class="ri-close-line"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="theme-grid">
            <button class="theme-option" data-theme="light">
              <div class="theme-preview light-preview"></div>
              <span>浅色</span>
            </button>
            <button class="theme-option" data-theme="dark">
              <div class="theme-preview dark-preview"></div>
              <span>深色</span>
            </button>
            <button class="theme-option" data-theme="blue">
              <div class="theme-preview blue-preview"></div>
              <span>蓝色</span>
            </button>
            <button class="theme-option" data-theme="green">
              <div class="theme-preview green-preview"></div>
              <span>绿色</span>
            </button>
            <button class="theme-option" data-theme="purple">
              <div class="theme-preview purple-preview"></div>
              <span>紫色</span>
            </button>
            <button class="theme-option" data-theme="orange">
              <div class="theme-preview orange-preview"></div>
              <span>橙色</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 媒体操作菜单 -->
    <div class="media-action-menu" id="mediaActionMenu">
      <div class="action-menu-item" data-action="match">
        <i class="ri-edit-line"></i>
        <span>手动匹配影片</span>
      </div>
      <div class="action-menu-item" data-action="unmatch">
        <i class="ri-link-unlink"></i>
        <span>解除匹配影片</span>
      </div>
      <div class="action-menu-item" data-action="delete">
        <i class="ri-delete-bin-line"></i>
        <span>删除</span>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="js/config.js"></script>
  <script src="js/api.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/index.js"></script>
</body>
</html>
